<template>
  <div v-if="props.show" class="mask">
    <div class="container_box">
      <div v-if="showCount >= 1" class="con">
        <AccountPlate :pay-list="payList" :data-info="dataInfo" @view-info="viewPlateInfo" />
      </div>

      <Transition>
        <div v-if="showCount >= 2" class="con">
          <AccoutNumber :pay-list="payList" :plate-info="plateInfo" @change-config="accountNumberChange" @change-type="changeAccountType" />
        </div>
      </Transition>

      <Transition>
        <div v-if="showCount >= 3" class="con">
          <AccoutConfig :account-info="accountInfo" :account-type="accountType" :plate-info="plateInfo" :pay-list="payList" />
        </div>
      </Transition>
    </div>
  </div>
</template>

<script setup>
import AccountPlate from './components/accountPlate.vue';
import AccoutNumber from './components/accountNumber.vue';
import AccoutConfig from './components/accountConfig.vue';
const props = defineProps({
  dataInfo: {
    type: Object,
    default: () => {}
  },
  payList: {
    type: Array,
    default: () => []
  },
  show: {
    type: Boolean,
    default: false
  }
});
const showCount = ref(1);
const changeCount = (number) => {
  showCount.value = showCount.value + number;
};

const showPayReceive = ref(false);
const selectReceiveList = ref([]);
const handleSelectionReceiveChange = (val) => {
  selectReceiveList.value = val;
};
const submitReceive = () => {
  console.log(selectReceiveList.value);
};

const plateInfo = ref({});
const viewPlateInfo = (row) => {
  plateInfo.value = row;
  showCount.value = 2;
};

const accountInfo = ref({});
const accountNumberChange = (row) => {
  accountInfo.value = row;
  showCount.value = 3;
};
const accountType = ref('add');
const changeAccountType = (val) => {
  accountType.value = val;
};
</script>

<style scoped>
.mask {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}

.container_box {
  display: flex;
  width: 96%;
  justify-content: space-between;
  height: 90vh;
  margin: 5vh auto 0 auto;
  gap: 10px;
  .con {
    width: 33%;
    flex: 1;
    background-color: #fff;
  }
}

.el-carousel__item {
  background-color: #fff;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateX(-30%);
}
</style>
